<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <el-text class="header-text">抢点班作业后台管理</el-text>
        <el-button
          class="header-button"
          type="primary"
          text
          style="float: right"
          @click="logout"
          >退出登录</el-button
        >
      </el-header>
      <el-main class="main">
        <div class="main-title">
          <div class="main-title-text" style="float: left">编辑作业</div>
          <div>
            <el-button class="main-button" @click="back">返回上一页</el-button>
          </div>
        </div>
        <div class="main-back">
          <el-form
            :model="form"
            label-width="auto"
            style="max-width: 700px"
            size="large"
          >
            <el-form-item label="作业名称">
              <el-input v-model="form.Name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="提交时间" style="width: 70%">
              <el-date-picker
                v-model="form.picker"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item label="作业归属">
              <el-select
                v-model="form.ClubType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="关联文章">
              <el-autocomplete
                v-model="articleTitle"
                :fetch-suggestions="queryArticleList"
                placeholder="请输入文章关键词"
                @select="handleSelectArticle"
                clearable
              />
            </el-form-item>
            <el-form-item label="关联直播">
              <el-select
                v-model="form.LiveId"
                placeholder="请选择（可选择昨日、今日以及未来7日已创建的直播）"
                style="width: 100%"
                clearable
                @change="handleLiveChange"
              >
                <el-option
                  v-for="item in live"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="选择类型">
              <div>
                <el-button type="primary" @click="addSingleChoice"
                  >添加单选</el-button
                >
                <el-button type="primary" @click="addMultipleChoice"
                  >添加多选</el-button
                >
                <el-button type="primary" @click="addBlank"
                  >添加简答题</el-button
                >
              </div>
            </el-form-item>
            <div
              class="question-container"
              v-for="(question, index) in questions"
              :key="index"
              :class="{ 'bg-change': isHovered[index] }"
              @mouseenter="handleMouseEnter(index)"
              @mouseleave="handleMouseLeave(index)"
            >
              <div class="question-title">
                {{ questionPrefix(index) }}
                {{ getQuestionTypeText(question.type) }}
              </div>
              <div style="width: 600px">
                <el-input v-model="question.description" />
              </div>
              <div class="add">
                <div v-if="question.type !== 3">
                  <div class="question-option">
                    <span>设置选项:</span>
                    <el-button type="primary" text @click="addOption(index)"
                      >添加</el-button
                    >
                  </div>
                  <div
                    v-for="(option, optionIndex) in question.content"
                    :key="optionIndex"
                  >
                    <div class="select" style="display: flex">
                      <div class="selection-item" style="display: flex">
                        <div style="width: 550px">
                          <el-input
                            v-model="question.content[optionIndex].text"
                          />
                        </div>
                        <div>
                          <el-button
                            type="primary"
                            text
                            @click="removeOption(index, optionIndex)"
                            >删除</el-button
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="delete" style="margin-left: 50px">
                  <el-button type="info" plain @click="removeQuestion(index)"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
            <div class="submit">
              <el-button
                type="primary"
                :disabled="!form.Name || !form.picker"
                @click="onSubmit"
                >确认</el-button
              >
            </div>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import AddWorkApi from "../api/AddWorkApi";
import _ from "lodash";
import dayjs from "dayjs";
import ClassListApi from "../api/ClassListApi";
import { ElMessage } from "element-plus";
import LoginApi from "../api/LoginApi";

import { useTokenStore } from "../stores/token";
import { useUserStore } from "../stores/user";
import { ar } from "date-fns/locale";
import { el } from "element-plus/es/locale";

const router = useRouter();
const options = ref([
  { id: 1, name: "牧民俱乐部" },
  { id: 2, name: "博古论坛" },
  { id: 3, name: "神枪手俱乐部" },
  { id: 4, name: "环球俱乐部" },
  { id: 5, name: "价值投资" },
  { id: 6, name: "波段行情" },
  { id: 7, name: "抄底卖顶" },
  { id: 8, name: "资金及仓位管理" },
  { id: 9, name: "财富的游戏" },
]);

const route = useRoute();
const id = ref(route.params.id);
console.log(id.value + "============");

// 用于存储获取到的作业数据
const homeworkData = ref<{
  name: string;
  startDate: string;
  endDate: string;
  clubType: string;
  article: {
    id: string;
    title: string;
  };
  live: {
    id: string;
    name: string;
  };
  status: number;
  form: FormItemType[];
}>({
  name: "",
  startDate: "",
  endDate: "",
  clubType: "",
  article: {
    id: "",
    title: "",
  },
  live: {
    id: "",
    name: "",
  },
  status: 0,
  form: [],
});

// 定义form数组中每个元素的类型接口
interface FormItemType {
  id: number;
  type: number;
  description: string;
  content: string; // 这里先定义为string，因为从数据看是JSON字符串格式，后续需要解析
  groupId: number;
  name: string;
  sort: number;
  status: number;
  createdAt: string;
  updatedAt: string;
}

const form = ref({
  id: "",
  Name: "",
  ClubType: "",
  ArticleId: "",
  LiveId: "",
  picker: [],
  StartDate: "",
  EndDate: "",
  Questions: [],
});

// 新增一个变量用于标识是否发布，这里先设为false表示未发布
const isPublished = ref(0);
onMounted(async () => {
  try {
    const response = await ClassListApi.getClassListOne(id.value);
    homeworkData.value = response.data;
    console.log(homeworkData.value);
    form.value.Name = homeworkData.value.name;
    // 根据后端返回数据设置发布状态变量的值
    isPublished.value = homeworkData.value.status;

    const start = dayjs(homeworkData.value.startDate).format("YYYY-MM-DD");
    const end = dayjs(homeworkData.value.endDate).format("YYYY-MM-DD");
    form.value.picker = [start, end];

    if (homeworkData.value.article && homeworkData.value.article.title) {
      articleTitle.value = homeworkData.value.article.title;
    } else if (homeworkData.value.live && homeworkData.value.live.name) {
      form.value.LiveId = homeworkData.value.live.name;
    }
    form.value.ClubType = homeworkData.value.clubType;
    const processFormData = () => {
      const newQuestions = [];
      homeworkData.value.form.forEach((formItem: FormItemType) => {
        // 解析content字段中的JSON字符串为实际的数组对象
        const contentArray = JSON.parse(formItem.content) as {
          id: string;
          text: string;
        }[];
        // 创建一个新的符合questions结构的对象
        const question = {
          id: formItem.id,
          type: formItem.type,
          description: formItem.description,
          content: contentArray,
          groupId: formItem.groupId,
          name: formItem.name,
          sort: formItem.sort,
          status: formItem.status,
          createdAt: formItem.createdAt,
          updatedAt: formItem.updatedAt,
        };
        newQuestions.push(question);
      });
      return newQuestions;
    };
    questions.value = processFormData();
  } catch (error) {
    console.error("接口请求出现错误:", error);
  }
});

const articleTitle = ref("");
// 问题列表数据
const questions = ref([]);
const onSubmit = () => {
  let hasEmptyDescription = false;
  questions.value.forEach(question => {
    if (question.description === '') {
      hasEmptyDescription = true;
    }
  });
  if (hasEmptyDescription) {
    ElMessage.error('存在题目未填写描述内容，请填写完整后再提交！');
    return;
  }
  // 从picker中获取日期数据并进行格式转换
  if (form.value.picker && form.value.picker.length === 2) {
    const startDate = dayjs(form.value.picker[0]).format("YYYY-MM-DD HH:mm:00");
    const endDate = dayjs(form.value.picker[1]).format("YYYY-MM-DD HH:mm:00");
    form.value.StartDate = startDate;
    form.value.EndDate = endDate;
  }
  form.value.Questions = questions.value;
  if (
    isLiveChange.value === false &&
    homeworkData.value.live &&
    homeworkData.value.live.id
  ) {
    form.value.LiveId = homeworkData.value.live.id;
  }
  if (form.value.LiveId) {
    // 如果form.value.liveid有值，优先使用liveid，清空ArticleId（假设后端不接受同时传这两个值且以liveid为准，可根据实际情况调整）
    form.value.ArticleId = "";
    articleTitle.value = "";
  } else if (form.value.ArticleId) {
    // 如果手动选择了关联文章，使用手动选择后更新的文章id（form.value.ArticleId）
  } else if (homeworkData.value.article && homeworkData.value.article.id) {
    // 如果没有手动选择，使用后端传回的数据中的关联文章id（homeworkData.value.article.id）
    form.value.ArticleId = homeworkData.value.article.id;
  }
  if (typeof id.value === "string") {
    form.value.id = id.value;
  }
  if (!form.value.ArticleId && !form.value.LiveId) {
    ElMessage.error("编辑失败，请选择关联文章或关联直播");
  } else {
    ClassListApi.editWork(form.value).then((response) => {
      const code = response["code"];
      const message = response["message"];
      if (code !== 200) {
        ElMessage.error(message);
      } else {
        console.log(response);
        ElMessage.success("编辑成功");
        router.push("/list");
      }
    });
  }

  console.log(id.value + "--------------");
  console.log(form.value);
};
const back = () => {
  window.history.back();
};

// 存储根据文章输入内容查询到的关联文章结果列表
const articleSearchResults = ref([]);
// 根据文章输入内容查询关联文章的函数
const queryArticleList = async (queryString: string) => {
  if (form.value.LiveId) {
    ElMessage.warning("您已关联直播，暂无法关联文章");
    articleTitle.value = ""; // 清空文章标题输入框
    //form.value.LiveId = '';   //(可选，清空关联直播选择框的值)
    return [];
  }
  try {
    const response = await AddWorkApi.getArticleList(queryString);
    const formattedResults = response.data.map((article) => ({
      value: article.title,
      label: article.id,
    }));
    articleSearchResults.value = formattedResults;
    return formattedResults;
  } catch (error) {
    console.error("查询关联文章失败", error);
    ElMessage.error("请输入正确的文章关联词");
    articleTitle.value = "";
    return [];
  }
};

//是否更改关联直播标识
const isLiveChange = ref(false);
const handleLiveChange = () => {
  isLiveChange.value = true;
  if (articleTitle.value) {
    ElMessage.warning("您已关联文章，暂无法关联直播");
    form.value.LiveId = ""; // 清空关联直播选择框的值
    form.value.ArticleId = "";
    //articleTitle.value = '';   (可选，暂不清空关联文章的值)
  }
};
// 处理选择文章的函数
const handleSelectArticle = (article: { label: string }) => {
  // 这里可以根据业务需求，比如将选中的文章id（article.label）传递给其他地方使用等
  console.log("选中的文章id", article.label);
  form.value.ArticleId = article.label; // 将选中文章的id赋值给对应表单字段，用于传递给后端
  const selectedArticle = articleSearchResults.value.find(
    (a) => a.label === article.label
  );
  if (selectedArticle) {
    articleTitle.value = selectedArticle.value; // 更新显示的文章题目
  }
};

//获取直播列表
const live = ref([]);
function getLive() {
  AddWorkApi.getLiveList()
    .then((res) => {
      live.value = res.data;
      console.log(live.value);
    })
    .catch((error) => {
      console.error("获取直播列表失败", error);
    });
}
getLive();

// 根据类型获取对应的题目类型文本显示
const getQuestionTypeText = (type) => {
  switch (type) {
    case 1:
      return "作业题目(单选)";
    case 2:
      return "作业题目(多选)";
    case 3:
      return "作业题目(简答题)";
    default:
      return "未知类型题目";
  }
};

const addSingleChoice = () => {
  if (isPublished.value === 1) {
    ElMessage.warning("处于发布中，不能添加新题目");
  } else {
    questions.value.push({
      type: 1, // 假设1代表单选，和后端格式对应起来
      description: "",
      content: [
        { id: "", text: "" },
        { id: "", text: "" },
      ],
    });
  }
};

const addMultipleChoice = () => {
  if (isPublished.value === 1) {
    ElMessage.warning("处于发布中，不能添加新题目");
  } else {
    questions.value.push({
      type: 2, // 假设2代表多选，和后端格式对应起来
      description: "",
      content: [
        { id: "", text: "" },
        { id: "", text: "" },
      ],
    });
  }
};

//const hasAddedBlank=ref(false);
const addBlank = () => {
// 在这里添加判断逻辑，如果还没有添加过填空题，才允许添加，添加后将hasAddedBlank设置为true
//if (!hasAddedBlank.value) {
    questions.value.push({
      type: 3,  // 假设3代表简答题，和后端格式对应起来
      description: '',
      content: [{ "id": "", "text": "" }]
    });
  //   hasAddedBlank.value = true;
  // }else {
  //   ElMessage.warning('只能添加一个简答题');
  // }
};

const addOption = (questionIndex) => {
  const currentQuestion = questions.value[questionIndex];
  // 如果当前题目没有content属性，则初始化一个空数组
  if (!currentQuestion.content) {
    currentQuestion.content = [];
  }
  currentQuestion.content.push({ id: "", text: "" });
};
const removeOption = (questionIndex, optionIndex) => {
  const currentQuestion = questions.value[questionIndex];
  // 判断当前题目类型是否为多选题
  if (currentQuestion.type === 1) {
    if (currentQuestion.content.length <= 1) {
      ElMessage.warning("单选题至少需要保留一个选项，不能继续删除");
      return;
    }
  }
  if (currentQuestion.type === 2) {
    // 如果当前多选题的选项数量已经是2个了，就不允许再删除
    if (currentQuestion.content.length <= 2) {
      ElMessage.warning("多选题至少需要保留两个选项，不能继续删除");
      return;
    }
  }
  currentQuestion.content.splice(optionIndex, 1);
};

const removeQuestion = (questionIndex) => {
  if (isPublished.value === 1) {
    ElMessage.warning("处于发布中，不能删除题目");
  } else {
    questions.value.splice(questionIndex, 1);
  }
};

// 计算属性，用于生成序号前缀
const questionPrefix = computed(() => {
  return (index) => {
    return `${index + 1}、`;
  };
});

// 用于存储每个问题标题是否被鼠标悬停的状态，初始化为false
const isHovered = ref(Array(questions.value.length).fill(false));
const handleMouseEnter = (index) => {
  isHovered.value[index] = true;
};

const handleMouseLeave = (index) => {
  isHovered.value[index] = false;
};

// 在组件挂载后初始化 `isHovered` 数组长度与 `questions` 数组长度一致
onMounted(() => {
  isHovered.value = Array(questions.value.length).fill(false);
});

//退出
function logout() {
  //清除登录信息
  const tokenStore = useTokenStore();
  const userStore = useUserStore();
  tokenStore.clear();
  userStore.clear();
  LoginApi.logout().then((res) => {
    console.log(res);
  });
  router.push("/");
}
</script>

<style scoped>
.submit {
  margin: 100px 212px;
}

.submit .el-button {
  padding: 25px 150px;
}

.question-title {
  transition: background-color 0.3s ease;
}

.bg-change {
  background-color: rgba(200, 200, 200, 0.3);
}

.question-title {
  margin-bottom: 10px;
}

.select {
  margin: 10px 0px 0px;
}

.delete {
  position: absolute;
  right: 10px;
  bottom: 0px;
}

.add {
  position: relative;
}

.question-container {
  margin: 20px 0;
  padding: 10px 20px;
  width: 750px;
  border-bottom: 1px solid #e5e5e5;
}

.header {
  height: 100px;
  line-height: 100px;
  padding: 0 80px;
}

.header-text {
  font-size: 22px;
  font-weight: 500;
  color: black;
  float: left;
}

.header-button {
  margin-top: 30px;
}

.main {
  padding: 30px 212px;
  background-color: #f8f8f8;
}

.main-title {
  font-size: 16px;
  background-color: white;
  font-weight: bold;
  height: 60px;
  border-bottom: 2px solid #ececec;
  padding: 0 15px;
  line-height: 52px;
}

.main-button {
  margin: 10px 15px 0 0;
  padding: 12px 20px;
  height: 40px;
  float: right;
}

.el-form {
  padding: 30px 78.5px;
  margin: auto;
}

.el-form-item {
  --font-size: 16px;
  margin: 0 0 25px;
}

.main-back {
  background-color: white;
}
</style>